<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tic-Tac-Toe Game</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        } 
        body {
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            background: #355C7D;  
            background: -webkit-linear-gradient(to right, #C06C84, #6C5B7B, #355C7D);  
            background: linear-gradient(to right, #C06C84, #6C5B7B, #355C7D); 
        }
        h1 {
            font-size: 60px;
            font-weight: bold;
            color: white;
            background: #FF0000;
            background: -webkit-radial-gradient(circle farthest-corner at center center, #FF0000 0%, #FFFF00 25%, #05C1FF 50%, #FFFF00 75%, #FF0000 100%);
            background: -moz-radial-gradient(circle farthest-corner at center center, #FF0000 0%, #FFFF00 25%, #05C1FF 50%, #FFFF00 75%, #FF0000 100%);
            background: radial-gradient(circle farthest-corner at center center, #FF0000 0%, #FFFF00 25%, #05C1FF 50%, #FFFF00 75%, #FF0000 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .turns {
            font-size: 30px;
            font-weight: bold;
            font-family: cursive;
            margin-bottom: 15px;
        }
        .turns.x {
            color: cornsilk;
            border-bottom: 2px solid cornsilk;
        }
        .turns.o {
            color: paleturquoise;
            border-bottom: 2px solid paleturquoise;
        }
        .board {
            width: 350px;
            height: 350px;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-gap: 8px;
            cursor: pointer;
        }
        .cell {
            font-size: 60px;
            font-family: cursive;
            border-radius: 15px;
            background-color: rgba(255, 255, 255, 0.25);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cell:hover {
            background-color: rgba(255, 255, 255, 0.5);
            border-left: 2px solid rgba(255, 255, 255, 0.8);
            border-right: 2px solid rgba(255, 255, 255, 0.8);
            box-shadow: 15px 15px 40px -6px rgba(0, 0, 0, 0.2);
        }
        .cell.x {
            color: cornsilk;
            cursor: not-allowed;
        }
        .cell.o {
            color: paleturquoise;
            cursor: not-allowed;
        }
        .board.x .cell:not(.x):not(.o),
        .board.o .cell:not(.x):not(.o) {
            text-indent: -9999px;
            overflow: hidden;
        }
        .board.x .cell:not(.x):not(.o):hover,
        .board.o .cell:not(.x):not(.o):hover {
            text-indent: 0px;
            color: rgba(129, 129, 129, 0.3);
        }
        .finish {
            height: 100vh;
            width: 100vw;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            background: rgba(255, 255, 255, 0.4);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px); 
            display: none;
        }
        .message {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 30px;
            width: 400px;
            height: 200px;
            border-radius: 30px;
            background-color: linen;
            box-shadow: 6px 7px 42px 0px rgba(0, 0, 0, 0.9);
            font-weight: bold;
            text-shadow: 1px 1px 3px rgba(82, 80, 80, 0.473);
        }
        .message .text{
            color: maroon;
            font-family: cursive;
        }
        .message button {
            color: rgb(141, 41, 41);
            margin-top: 30px;
            padding: 10px 12px;
            font-size: 20px;
            font-weight: bold;
            border-radius: 10px;
            cursor: pointer;
        }
        .finish button {
            background: -webkit-linear-gradient(100deg, #fff6b7 10%, #f6416c 150%);
            box-shadow: 1px 1px 5px 2px rgba(128, 128, 128, 0.596);
            border: none;
        }
        .finish button:active {
            transform: scale(0.8);
        }
    </style>
</head>
<body>
    <h1>TIC TAC TOE</h1>
    <div class="turns x">Player X's turn</div>
    <div class="board x">
      <div class="cell">X</div>
      <div class="cell">X</div>
      <div class="cell">X</div>
      <div class="cell">X</div>
      <div class="cell">X</div>
      <div class="cell">X</div>
      <div class="cell">X</div>
      <div class="cell">X</div>
      <div class="cell">X</div>
    </div>
    <div class="finish">
      <div class="message">
        <span class="text"></span>
        <button id="restart">Play Again</button>
      </div>
    </div>
    <script>
        var currTurn = "x";
        var board = document.querySelector(".board");
        var text = document.querySelector(".text");
        var turns = document.querySelector(".turns");
        var cells = document.querySelectorAll(".cell");
        var restart = document.getElementById("restart");

        const winCombs = [
        [0, 1, 2],
        [3, 4, 5],
        [6, 7, 8],
        [0, 3, 6],
        [1, 4, 7],
        [2, 5, 8],
        [0, 4, 8],
        [2, 4, 6],
        ];

        cells.forEach((element) => {
        element.addEventListener("click", doThis, { once: true }); 
        });

        restart.addEventListener("click", (e) => {
        location.reload();
        return false;
        });

        function doThis(e) {
        markTheCell(e.target);
        if (isCurrWinner()) {
            gameOver(false);
        } else if (isDraw()) {
            gameOver(true);
        } else {
            changeTurn();
            changeBoard();
        }
        }

        function markTheCell(element) {
        if (currTurn == "x") {
            element.innerHTML = "X";
            element.classList.add("x");
        } else {
            element.innerHTML = "O";
            element.classList.add("o");
        }
        }

        function isCurrWinner() {
        return winCombs.some((currComb) => {
            return currComb.every((cellIndex) => {
            return cells[cellIndex].classList.contains(currTurn);
            });
        });
        }

        function isDraw() {
        return [...cells].every((cell) => {
            return cell.classList.contains("x") || cell.classList.contains("o");
        });
        }

        function gameOver(draw) {
        if (draw) {
            text.innerText = "Draw!";
        } else {
            text.innerText = "Player " + currTurn.toUpperCase() + " Wins!";
        }
        document.querySelector(".finish").style.display = "flex";
        }

        function changeTurn() {
        turns.classList.remove(currTurn);
        currTurn == "x" ? (currTurn = "o") : (currTurn = "x");
        turns.classList.add(currTurn);
        turns.innerText = "Player " + currTurn.toUpperCase() + "'s turn";
        }

        function changeBoard() {
        cells.forEach((element) => {
            if (element.classList.length == 1)
            element.innerHTML = currTurn.toUpperCase();
        });
        currTurn == "x" ? board.classList.remove("o") : board.classList.remove("x");
        board.classList.add(currTurn);
        }
    </script>
</body>
</html>